<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文档碎片处理速度比较</title>
		<script type="text/javascript">
			//这个实验是比较文档节点碎片处理方式那种运行的比较快
			
			window.onload = function(){
				//第一种：边创建节点边添加到文档中的节点
				console.time("test1"); //打开一个计时器
				for(var i=0; i<100000; i++){
					var newDiv = document.createElement("div");
					document.body.appendChild(newDiv);
				}
				console.timeEnd("test1");    //关闭计时器，并打印出来
				
				
				//第二种：创建一个大节点，用于装创建的新节点，最后将大节点添加到文档中的节点去
				console.time("test2"); //打开一个计时器
				var node = document.createElement("div");
				for(var i=0; i<100000; i++){
					var newDiv = document.createElement("div");
					node.appendChild(newDiv);
				}
				document.body.appendChild(node);
				console.timeEnd("test2");    //关闭计时器，并打印出来
			}
		</script>
	</head>
	<body>
		
	</body>
</html>
